<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .wrap {
        margin: 100px auto;
        width: 40px;
        height: 300px;
        overflow: hidden;
    }

    .inner {
        height: 600px;
        /* 条纹效果 */
        background-image: repeating-linear-gradient(135deg, green 0px, green 10px, #ccc 10px, #ccc 20px);
    }
</style>

<body>
    <div class="wrap">
        <div class="inner"></div>
    </div>
    <script>
        // 获取元素
        let inner = document.querySelector('.inner');
        let flag = 0;
        // 间歇函数 定时器
        setInterval(function () {
            flag++;
            if (flag == 300) {
                flag = 0;
            }
            // marginTop动态变化 是滚筒动起来的关键
            inner.style.marginTop = `${-flag}px`;
        }, 100 / 60)
    </script>
</body>

</html>